<template>
  <div class="mian">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in goodsSwipe" :key="index">
        <img v-lazy="image.src" />
      </van-swipe-item>
    </van-swipe>
    <div class="goodInfo">
      <!-- 产品标题 -->
      <div class="title">{{goodsInfo.title}}</div>
      <!-- 产品价格 -->
      <p class="price">市场价：<s>{{'￥' + goodsInfo.market_price}}</s> &nbsp; &nbsp; 销售价：<span style="color: red;">{{'￥' + goodsInfo.sell_price}}</span></p>
      <div class="count">
        购买数量  <van-stepper v-model="buynum" integer min="1" :max="goodsInfo.stock_quantity"/>
      </div>
      <!-- 购买和加入购物车 -->
      <div class="btn">
        <van-button type="info" size="small">立刻购买</van-button>
        <van-button type="danger" @click="addShopCar" style="margin-left: 15px;" size="small">加入购物车</van-button>
      </div>
    </div>
    <!-- 产品参数 -->
    <div class="goodsParams">
      <div class="title">产品参数</div>
      <div class="body">
        <p>产品货号：{{goodsInfo.goods_no}}</p>
        <p>库存情况：{{goodsInfo.stock_quantity}}</p>
        <p>上架时间：{{goodsInfo.add_time}}</p>
      </div>
      <div class="btns">
      <van-button plain type="info" size="large" style="margin-bottom: 10px;" :to='"/goodsdesc/" + $route.params.id'>图文介绍</van-button>
        <van-button plain type="danger" size="large" :to='"/goodscomments/" + $route.params.id'>商品评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      goodsInfo: {},
      goodsSwipe: [],
      buynum: 1
    }
  },
  created () {
    this.getGoodsInfo()
    this.getGoodsSwipe()
  },
  methods: {
    ...mapMutations(['changeBuyNum']),
    // 获取产品详情
    async getGoodsInfo () {
      const { data: res } = await this.$axios.get(`/api/goods/getinfo/${this.$route.params.id}`)
      if (res.status !== 0) return false
      this.goodsInfo = res.message[0]
    },
    // 获取轮播图片
    async getGoodsSwipe () {
      const { data: res } = await this.$axios.get(`/api/getthumimages/${this.$route.params.id}`)
      if (res.status !== 0) return false
      this.goodsSwipe = res.message
    },
    // 加入购物车
    addShopCar () {
      const obj = {
          id: this.$route.params.id,
          num: this.buynum
        }
      this.changeBuyNum([this.buynum, obj])
    }
  },
}
</script>

<style lang="less" scoped>
.mian{
  padding: 10px;
}
.van-swipe{
  border: 1px solid #ccc;
  height: 300px;
  text-align: center;
}
.goodInfo {
  border: 1px solid #ccc;
  margin-top: 10px;
  padding: 15px;
}
.title{
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
.price{
  color: #8f8f94;
  margin-left: 10px;
}
.van-stepper {
  display: inline-block;
}
.count{
  padding: 10px;
}
.goodsParams{
  margin-bottom: 50px;
  border: 1px solid #ccc;
  margin-top: 10px;
  padding: 15px;
}
.body{
  padding: 15px;
}
.body p{
  color: #8f8f94;
  font-size: 14px;
}

</style>
